// .container {
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
//   .content {
//     display: flex;
//     justify-content: center;
//     padding-top: 100px;
//     box-sizing: border-box;
//     .cover {
//       @size: 400px;
//       width: @size;
//       height: @size;
//       overflow: hidden;
//       margin-right: 116px;
//       img {
//         width: 100%;
//         object-fit: contain;
//       }
//     }

//     .info {
//       color: #fff;
//       font-size: 12px;
//       width: 500px;
//       h1 {
//         margin-bottom: 20px;
//       }
//       h2 {
//         display: flex;
//         column-gap: 20px;
//         margin-bottom: 10px;
//         font-weight: normal;
//         label {
//           color: #9f9f9f;
//           margin-right: 10px;
//         }
//       }
//       h2 + p {
//         max-height: 500px;
//         overflow: auto;
//       }
//     }
//   }
//   .imgBox {
//     position: absolute;
//     z-index: -1;
//     width: 100%;
//     height: 100%;
//     overflow: hidden;
//     img {
//       width: 100%;
//       height: 100%;
//       object-fit: cover;
//       filter: blur(10px);
//       transform: scale(1.1);
//     }
//   }

//   .playBar {
//     position: fixed;
//     bottom: 0;
//     left: 0;
//     width: 100vw;
//     height: 100px;
//     display: flex;
//     justify-content: center;
//     background-color: #403f3f;
//     opacity: 0.8;
//   }

//   .playList {
//     position: absolute;
//     right: 10%;
//     bottom: 90px;
//     background-color: #403f3f;
//     width: 470px;
//     height: 410px;
//     padding: 10px;
//     border-radius: 5px;
//     h2 {
//       font-weight: normal;
//       color: #fff;
//       display: flex;
//       justify-content: space-between;
//       .createList {
//         display: flex;
//         align-items: center;
//         img {
//           margin-right: 10px;
//           @size: 25px;
//           height: @size;
//           width: @size;
//         }
//       }
//       img {
//         @size: 25px;
//         width: @size;
//         height: @size;
//         &:hover {
//           filter: brightness(2);
//         }
//       }
//     }

//     .line {
//       display: flex;
//       padding: 3px 5px;
//       background-color: #f6f6f6;
//       margin-top: 8px;
//       .seq {
//         margin-right: 10px;
//       }
//       .name {
//         width: 200px;
//         white-space: nowrap;
//         overflow: hidden;
//         text-overflow: ellipsis;
//       }
//       .author {
//         width: 100px;
//       }
//       .del {
//         width: 50px;
//         display: flex;
//         justify-content: flex-end;
//       }
//     }
//   }

//   .mode {
//     width: 16px;
//     display: flex;
//     align-items: center;
//     margin-left: 60px;
//     .modeBut {
//       width: 100%;
//       opacity: 0.5;
//       margin-right: 40px;
//     }
//     .modeBut:hover {
//       opacity: 1;
//     }
//     .listWrp {
//       width: 100%;
//       // position: relative;
//     }
//   }

//   .controller {
//     display: flex;
//     align-items: center;
//     @fz: 30px;
//     font-size: @fz;
//     --color: #fff;

//     .circle() {
//       border: 4px solid var(--color);
//       border-radius: 100%;
//       padding: 10px;
//       transform: scale(0.8);
//     }
//     .hover() {
//       &:hover {
//         box-shadow: 0px 0px 20px 6px #ee1111;
//         --color: #f6f6f6;
//       }
//     }

//     .common() {
//       .hover();
//       transition: 0.2s;
//       color: var(--color);
//     }

//     .backward {
//       .circle();
//       .common();
//     }

//     .forward {
//       .circle();
//       .common();
//     }

//     .play {
//       .common();
//       border-radius: 100%;
//       display: flex;
//       font-size: @fz*2;
//       margin: 0 20px;
//     }
//   }

//   .timeline {
//     display: flex;
//     align-items: center;
//     .right {
//       width: 370px;
//       color: #f6f6f6;
//       .top {
//         display: flex;
//         justify-content: space-between;

//         .slash {
//           margin: 0 5px;
//         }
//       }

//       .bot {
//         @topGap: 40px;
//         position: relative;
//         // margin-top: 10px;
//         padding-top: @topGap;
//         box-sizing: border-box;
//         .line {
//           position: absolute;
//           width: 100%;
//           height: 2px;
//           top: 50%;
//           transform: translateY(-50%);
//           background-color: #fff;
//           z-index: -1;
//         }

//         .dot {
//           position: absolute;
//           // top: -px;
//           top: (@topGap / 2 - 5);
//           left: 0px;
//           transition: left 0.2s;
//           border-radius: 100%;
//           height: 10px;
//           width: 10px;
//           background-color: #1677ff;
//           box-shadow: 0px 0px 6px #fff;
//           animation: flicker 6s alternate infinite;
//         }

//         @keyframes flicker {
//           0% {
//             box-shadow: 0px 0px 5px #fff;
//           }
//           100% {
//             box-shadow: 0px 0px 13px #fff;
//           }
//         }
//       }
//     }
//     .thumbnail {
//       @size: 50px;
//       margin: 0 20px;
//       height: @size;
//       width: @size;
//     }
//   }
// }

// .addListBox {
//   display: flex;
// }

// .switchList {
//   font-weight: normal;
//   font-size: 16px;
//   margin-top: 10px;
// }

// .changeListName {
//   border: 0;
//   outline: none;
//   background: transparent;
//   width: 80px;
// }

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content {
    display: flex;
    justify-content: center;
    padding-top: 100px;
    box-sizing: border-box;
    .cover {
      @size: 400px;
      width: @size;
      height: @size;
      overflow: hidden;
      margin-right: 116px;
      img {
        width: 100%;
        object-fit: contain;
      }
    }

    .info {
      color: #fff;
      font-size: 12px;
      width: 500px;
      h1 {
        margin-bottom: 20px;
      }
      h2 {
        display: flex;
        column-gap: 20px;
        margin-bottom: 10px;
        font-weight: normal;
        label {
          color: #9f9f9f;
          margin-right: 10px;
        }
      }
      h2 + p {
        max-height: 500px;
        overflow: auto;
      }
    }
  }
  .imgBox {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(10px);
      transform: scale(1.1);
    }
  }
}
